<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../css/参保账单.css" />
    <link rel="stylesheet" href="../../icon-font-css/lifei-font/iconfont.css" />
    <title>参保账单</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <div class="header">
        <div class="logo">
            <span style="font-size: 25px;" class="iconfont icon-oabangong-copy"></span>
            <span class="title"><strong>办公后台系统</strong></span>
        </div>
        <div class="category">
            <ul class="category-content">
                <li><a href="../index.html">工作台</a></li>
                <li><a href="">数据大屏</a></li>
                <li><a href="">员工</a></li>
                <li><a href="">组织</a></li>
                <li><a href="">招聘</a></li>
                <li><a href="">考勤</a></li>
                <li><a href="">薪酬</a></li>
                <li><a href="">社保公积金</a></li>
                <li><a href="">绩效</a></li>
                <li><a href="">培训</a></li>
                <li><a href="">审批</a></li>
                <li><a href="">权限设置</a></li>
            </ul>
        </div>
    </div>

    <div class="bg">
        <div class="nav">
            <div class="nav-name"><span>社保公积金</span></div>
            <div id="nc" class="nav-content">
                <div id="yui"><a href="./参保方案.html">参保方案</a></div>
                <div><a href="./参保档案.html">参保档案</a></div>
                <div><a href="./参保账单.html">参保账单</a></div>
            </div>
        </div>
        <div class="content">

            <div class="search-box">
                <div class="plan-name">
                    <div class="vbn"></div>
                    <div class="bnm">参保账单</div>
                </div>
                <div class="search-box-top">
                    <div class="search-box1">
                        <div class="search"><input type="text" id="search" placeholder="查询账单"></div>
                    </div>
                    <div id="searchText" class="search-text"><span>搜索</span></div>
                </div>

                <div class="search-box2">
                    <div class="sx-conditions">筛选条件:</div>
                    <div class="sx-show"><span>名称: 3月份汇总</span>
                        <div id="clearBtn" class="show-img"><img src="../../img/lf/u1035.png" alt=""></div>
                    </div>
                </div>
            </div>
            <div class="details-box">
                <div class="new-plan">
                    <a href=""><span>+ 新增账单</span></a>

                </div>
                <div class="container">
                    <div id="box">
                        <table>

                            <tbody>
                                <!-- <tr>
                              <td>1</td>
                              <td>张三</td>
                              <td>女</td>
                              <td>18</td>
                              <td>
                                <button>编辑</button>
                                <button>删除</button>
                              </td>
                            </tr> -->
                            </tbody>
                        </table>
                        <div class="page-box">
                            <div id="pre">上一页</div>
                            <div id="pages">
                                <!-- <div>1</div>
                            <div>2</div> -->
                            </div>
                            <div id="next">下一页</div>
                        </div>
                    </div>
                    <div id="modifyModal">
                        <div class="modify-modal-box">
                            <div id="modifyModalContent">
                                <form>
                                    <div class="row">
                                        <label class="col-lg-5">账单日期：</label><input class="col-lg-6" id="dataId"
                                            type="text" />
                                    </div>
                                    <div class="row">
                                        <label class="col-lg-5">合计金额：</label><input class="col-lg-6" id="dataCity"
                                            type="text" />
                                    </div>
                                    <div class="row">
                                        <label class="col-lg-5">参保人数：</label><input class="col-lg-6" id="dataSocial"
                                            type="text" />
                                    </div>
                                    <div class="row">
                                        <label class="col-lg-5">个人缴纳合计：</label><input class="col-lg-6" id="dataAcc"
                                            type="text" />
                                    </div>
                                    <div class="row">
                                        <label class="col-lg-5">公司缴纳合计：</label><input class="col-lg-6" id="dataDate"
                                            type="text" />
                                    </div>
                                    <!-- <div class="row">
                                        <label class="col-lg-5">操作人：</label><input class="col-lg-6" id="dataPerson"
                                            type="text" />
                                    </div> -->
                                </form>
                                <!-- form 会导致 自动关闭 -->
                                <div class="row">
                                    <button class="col-lg-4" id="confirmBtn">确定编辑</button>
                                    <span class="col-lg-4"></span>
                                    <button class="col-lg-4" id="cancelBtn">取消</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                        aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                        &times;
                                    </button>
                                    <h4 class="modal-title" id="myModalLabel">
                                        是否删除？
                                    </h4>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消
                                    </button>
                                    <button id="closeModal" type="button" class="btn btn-primary">
                                        确定
                                    </button>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script>
            //后端假数据
            let data = [
                { id: "1月份汇总账单表", sum: "合计金额", number: "参保人数", personal: "个人缴纳合计", company: "公司缴纳合计" },
                { id: "2月份汇总账单表", sum: "合计金额", number: "参保人数", personal: "个人缴纳合计", company: "公司缴纳合计" },
                { id: "3月份汇总账单表", sum: "合计金额", number: "参保人数", personal: "个人缴纳合计", company: "公司缴纳合计" },
                { id: "4月份汇总账单表", sum: "合计金额", number: "参保人数", personal: "个人缴纳合计", company: "公司缴纳合计" },
                { id: "5月份汇总账单表", sum: "合计金额", number: "参保人数", personal: "个人缴纳合计", company: "公司缴纳合计" },
                { id: "6月份汇总账单表", sum: "合计金额", number: "参保人数", personal: "个人缴纳合计", company: "公司缴纳合计" },
                { id: "7月份汇总账单表", sum: "合计金额", number: "参保人数", personal: "个人缴纳合计", company: "公司缴纳合计" },
                { id: "8月份汇总账单表", sum: "合计金额", number: "参保人数", personal: "个人缴纳合计", company: "公司缴纳合计" },
                { id: "9月份汇总账单表", sum: "合计金额", number: "参保人数", personal: "个人缴纳合计", company: "公司缴纳合计" },
                { id: "10月份汇总账单表", sum: "合计金额", number: "参保人数", personal: "个人缴纳合计", company: "公司缴纳合计" },
                { id: "11月份汇总账单表", sum: "合计金额", number: "参保人数", personal: "个人缴纳合计", company: "公司缴纳合计" },
                { id: "12月份汇总账单表", sum: "合计金额", number: "参保人数", personal: "个人缴纳合计", company: "公司缴纳合计" },


            ];

            $("#yui").on("click", function () {
                console.log(1)
            })

            const pageSize = 6;

            function renderTbody(data, currentPage = 1) {
                // 渲染分页
                renderPaging(data, currentPage);
                /* console.log("当前", currentPage); */
                const startIndex = pageSize * (currentPage - 1);
                const endIndex = pageSize + startIndex;

                const dataByPaging = data.slice(startIndex, endIndex);

                // 动态渲染
                // 清空
                $("#box tbody").empty();
                for (let i = 0; i < dataByPaging.length; ++i) {
                    const item = dataByPaging[i];
                    $("#box tbody").append(`
                            <tr>
                              <td><strong>${item.id}</strong></td>
                              <td>${item.sum}</br>${400000}</td>
                              <td>${item.number}</br>${1300}</td>
                              <td>${item.personal}</br>${190000}</td>
                              <td>${item.company}</br>${210000}</td>
                              <td>
                                <button data-id="${item.id}" class="modify-btn">编辑</button>
                                <button id="delBtn" data-id="${item.id}" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">删除</button>
                              </td>
                            </tr>
                            `);
                }
            }
            renderTbody(data);
            /* 
              渲染页面
            */
            function renderPaging(data, currentPage = 1) {
                $("#pages").empty();
                const num = Math.ceil(data.length / pageSize);
                for (let i = 1; i <= num; ++i) {
                    $("#pages").append(`<div>${i}</div>`);
                }

                $("#pages > div")
                    .eq(currentPage - 1)
                    .addClass("currentPageColor");
            }
            //搜索

            $("#search").on("blur", function (event) {
                // 去除前后空格
                let value = event.target.value.trim();
                console.log(value)
                // 判空
                if (!value) {
                    // 原来的数据恢复
                    renderTbody(data);
                    return;
                }
                const searchData = [];
                // value 跟 data 中 每一项 value 进行对比

                for (let i = 0; i < data.length; ++i) {
                    // 是否包含子字符串
                    if (data[i].id.includes(value)) {
                        // 我们要保留原有的数据用于恢复
                        searchData.push(data[i]);
                    }
                }

                renderTbody(searchData);
            });
            //清除筛选
            $("#clearBtn").on("click", function (event) {
                let value = ""
                // 删除 isComplete 为 true 的数据
                /*   for (let i = 0; i < data.length; ++i) {
                      const item = data[i];
                      if (item.isComplete === true) {
                          // 数组删除
                          data.splice(i, 1);
                          i--;
                      }
                  } */
                // 基于新的数据重新渲染
                renderTbody(data);
            });
            // 为每个页码添加点击事件
            $("#pages").on("click", "div", function (event) {
                const currentPage = parseInt($(event.target).text());
                renderTbody(data, currentPage);
            });

            // 处理上一页
            $("#pre").on("click", function (event) {
                // 获取到当前页
                const currentPage = parseInt($("#pages > .currentPageColor").text());
                // 当前页为1  就不能上一页
                if (currentPage === 1) {
                    return;
                }

                renderTbody(data, currentPage - 1);
            });

            // 处理下一页
            $("#next").on("click", function () {
                // 获取到当前页
                const currentPage = parseInt($("#pages > .currentPageColor").text());

                const max = Math.ceil(data.length / pageSize);
                // 当前页为 max 就不能下一页
                if (currentPage === max) {
                    return;
                }

                renderTbody(data, currentPage + 1);
            });

            /* //关闭删除按钮模态框
            $("#closeModal").on("click", function () {
                $('#myModal').modal('hide')
                console.log(1)
 
            }) */

            //展示弹窗
            $("#delBtn").on("click", function () {
                $("#myModal").show();
            })


            // 处理删除
            $("#closeModal").on("click", function (event) {

                const dataId = parseInt($(event.target).attr("data-id"));
                //展示弹窗
                $('.modal-backdrop').remove()

                // 编辑 data
                // 通过id 找到对应数据 并删除
                for (let i = 0; i < data.length; ++i) {
                    // 删除id相同的
                    if (data[i].id === dataId) {
                        data.splice(i, 1);
                    }

                }
                // 基于新数据  刷新页面
                renderTbody(data);

                // 隐藏弹窗
                $("#myModal").hide();

            });
            // 关闭弹窗
            $("#closeModal").on("click", function () {
                $("#myModal").hide();
                $('.modal-backdrop').remove()
            });

            // 编辑按钮处理
            $("#box tbody").on("click", ".modify-btn", function (event) {
                const dataId = $(event.target).attr("data-id");

                // 展示弹窗
                $("#modifyModal").show();


                const currentData = data.find((item) => {
                    console.log(item.id);
                    return item.id === dataId;
                });

                $("#dataId").val(currentData.id);
                $("#dataSum").val(currentData.sum);
                $("#dataNumber").val(currentData.number);
                $("#dataPersonal").val(currentData.personal);
                $("#dataCompany").val(currentData.company);

            });

            // 关闭弹窗
            $("#cancelBtn").on("click", function () {
                $("#modifyModal").hide();
            });

            // 确认编辑
            $("#confirmBtn").on("click", (event) => {
                // 获取input的值
                const id = ($("#dataId").val());
                const sum = $("#dataSum").val();
                const number = $("#dataNumber").val();
                const personal = $("#dataPersonal").val();
                const company = $("#dataCompany").val();
                console.log(id);

                // 编辑 data
                for (let i = 0; i < data.length; ++i) {
                    const item = data[i];
                    if (item.id === id) {
                        item.id = id;
                        item.sum = sum;
                        item.number = number;
                        item.personal = personal;
                        item.company = company;
                    }
                }
                // 重新渲染
                renderTbody(data);
                // 隐藏弹窗
                $("#modifyModal").hide();
            });
        </script>


</body>

</html>